<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>箭头函数</title>
</head>

<body>
  <script>
    // ES6允许使用 箭头 (=>) 定义函数

    // 1.普通声明函数方式
    const fn1 = function () {
    }

    // 2.箭头声明函数方式
    const fn2 = (num1, num2) => {
      return num1 + num2;
    }
    // 调用函数进行测试
    let result = fn2(1, 2);
    console.log(result);


    // TODO: 3.注意点, 箭头函数的this指向是静态的, 始终指向声明时的第一个值
    // 我们进行如下测试证明
    // 1.我们先给window.name赋一个初始值
    // 2.定义两个函数, 一个正常定义, 一个使用箭头函数, 输出this.name(如果在最外层的this指向为window对象), 查看输出结果
    // 3.创建一个person对象, 定义一个name并赋一个初始值
    // 4.使用call()改变函数的this指向为新创建的person对象, 查看输出结果

    window.name = "小陈同志";
    function getName1() {
      console.log(this.name);
    }
    const getName2 = () => {
      console.log(this.name);
    }
    // 2.输出查看结果: 这边没什么问题, 都打印了正常的this指向的值
    getName1(); // 小陈同志
    getName2(); // 小陈同志
    console.log("\n");

    const person = {
      name: "小慧同学"
    }

    getName1.call(person); // 小慧同学
    getName2.call(person); // 小陈同志

    // 4.由上述结果可发现, 普通函数定义的this指向已经被修改了, 但是箭头函数的this指向函数原来的window
    // 因为此特性, 所以箭头函数不能作为构造函数
    // 箭头函数里面不能使用arguments (arguments在正常函数中可以获取一个参数数组, 当传递的参数个数不确定时很有用)
    function argumentsTest() {
      console.log(arguments);
    }
    argumentsTest(1, 2, 3);
  </script>
</body>

</html>